﻿@page "/docs/extensions/snackbar"

<Seo Canonical="/docs/extensions/snackbar" Title="Blazorise Snackbar component" Description="Learn to use and work with the Blazorise Snackbar component, to provide brief messages about app processes. The component is also known as a toast." />

<DocsPageTitle Path="Extensions/Snackbar">
    Blazorise Snackbar component
</DocsPageTitle>

<DocsPageLead>
    Snackbar provide brief messages about app processes. The component is also known as a toast.
</DocsPageLead>

<DocsPageParagraph>
    The snackbar extension is defined of several different components:
</DocsPageParagraph>

<UnorderedList>
    <UnorderedListItem>
        <Code Tag>Snackbar</Code> main snackbar component
        <UnorderedList>
            <UnorderedListItem>
                <Code Tag>SnackbarBody</Code> container for the snackbar content
            </UnorderedListItem>
            <UnorderedListItem>
                <Code Tag>SnackbarAction</Code> snackbar action button
            </UnorderedListItem>
        </UnorderedList>
    </UnorderedListItem>
</UnorderedList>

<DocsPageSubtitle>
    Installation
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="NuGet">
        Install extension from NuGet.
    </DocsPageSectionHeader>
    <DocsPageSectionSource Code="SnackbarNugetInstallExample"></DocsPageSectionSource>
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Imports">
        In your main <Badge Color="Color.Light">_Imports.razor</Badge> add:
    </DocsPageSectionHeader>
    <DocsPageSectionSource Code="SnackbarImportsExample"></DocsPageSectionSource>
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Static files">
        Include CSS link into your <Code>index.html</Code> or <Code>_Layout.cshtml</Code> / <Code>_Host.cshtml</Code> file, depending if you’re using a Blazor WebAssembly or Blazor Server side project.
    </DocsPageSectionHeader>
    <DocsPageSectionSource Code="SnackbarResourcesExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Basic example">
        A basic snackbar that aims to reproduce standard snackbar behavior.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <SnackbarExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="SnackbarExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Variant snackbars">
        You can also define variant <Blazorise.Link To="docs/helpers/colors">colors</Blazorise.Link> to override default snackbar style.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <SnackbarVariantExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="SnackbarVariantExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Stacked snackbars">
        When you want to show multiple snackbars stacked on top of each other you can use a wrapper component <Code>SnackbarStack</Code>. 
        You can specify <Code>Action&lt;SnackbarOptions&gt; options</Code> when calling <Code>PushAsync()</Code> in order to specify the <Code>Snackbar</Code> parameters available below.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <SnackbarStackedExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="SnackbarStackedExample" />
</DocsPageSection>

<ComponentApiDocs ComponentTypes="[typeof(Snackbar)]" />